<template>
	<view class="niceui-flex-column width-100p bg">
		<image class="login-bg-img" src="../../static/login-bg.png" mode="widthFix"></image>
		<view class="logo">
			<!--替换自己的logo图片/公司名/标语-->
			<view class="logo-border niceui-flex-column" @touchend="maskTouchend">
				<image class="logo-img" src="../../static/logo.png" mode="widthFix"></image>
				<text class="logo-name">{{title}}</text>
				<text class="logo-slogan">{{slogan}}</text>
			</view>
		</view>
		<view class="login-btns">
			<view v-show="isLogin" class="btn-view login" @click="login"><text style="font-weight: 600;"
					class="btn-text">Start Join</text></view>
			<!-- <view class="btn-view register" @click="register"><text class="btn-text">注册</text></view> -->
		</view>
	</view>
</template>

<script>
	import {
		login,
		openid
	} from '@/api/login.js';
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				title: "please shut up!",
				slogan: "",
				isLogin: true,
				touchNum: 0,
			}
		},
		methods: {
			maskTouchend(e) {
				this.touchNum++
				setTimeout(() => {
					if (this.touchNum == 3) {
						debugger
						uni.navigateTo({
							url: '/pages/login/login' //填写在page.json中配置的登录页面login路径
						})
					}
					this.touchNum = 0
				}, 300)
			},
			login() {
				uni.showLoading({
					title: '快乐连接中····'
				});
				let that = this;
				that.isLogin = false;
				
				wx.login({
					success: res => {
						
						if (res.code) {
							console.log(res.code);
							
							openid(res.code).then(res => {
								
								var openid = res.data;
								console.log('openid:', openid)
								var config = {
									deviceport: 3,
									lasting: false,
									linkup: true,
									logintype: 3,
									solecode: openid,
									vercodes: {
										keycode: 'love',
										valuecode: 'love'
									}
								};
								// 获取token
								login(config).then(res => {
									let data = res.data.data.content;
									let message = res.data.data.resmsg;
									if (!res.data.data.status) {
										uni.showToast({
											title: message,
											icon: 'none',
										});
										return false;
									};
									console.log('logindata:', res.data.data)
									store.commit('setUserinfo', {
										token: data.token,
										accountid: data.result.accountid,
										userid: data.result.userid,
										username: data.result.username,
										roles: data.result.roles
									});
									// console.log('userinfostore:',this.$store.state.userinfo);
									// 跳回原页面
									uni.hideLoading();
									that.isLogin = true;
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}).catch(err => {
									that.isLogin = true;
									uni.hideLoading();
									uni.showToast({
										title: err,
										icon: 'none',
									});
								})
							});
							// wx.request({
							// 	url: URL,
							// 	success: function(res) {
							// 		var openid = res.data.openid;
							// 		console.log('openid:', openid) //res.data中有openid
							// 		var config = {
							// 			deviceport: 3,
							// 			lasting: false,
							// 			linkup: true,
							// 			logintype: 3,
							// 			solecode: openid,
							// 			vercodes: {
							// 				keycode: 'love',
							// 				valuecode: 'love'
							// 			}
							// 		};
							// 		// 获取token
							// 		login(config).then(res => {
							// 			let data = res.data.data.content;
							// 			let message = res.data.data.resmsg;
							// 			if (!res.data.data.status) {
							// 				uni.showToast({
							// 					title: message,
							// 					icon: 'none',
							// 				});
							// 				return false;
							// 			};
							// 			console.log('logindata:', res.data.data)
							// 			store.commit('setUserinfo', {
							// 				token: data.token,
							// 				accountid: data.result.accountid,
							// 				userid: data.result.userid,
							// 				username: data.result.username,
							// 				roles: data.result.roles
							// 			});
							// 			// console.log('userinfostore:',this.$store.state.userinfo);
							// 			// 跳回原页面
							// 			uni.hideLoading();
							// 			that.isLogin = true;
							// 			uni.reLaunch({
							// 				url: '/pages/index/index'
							// 			})
							// 		}).catch(err => {
							// 			that.isLogin = true;
							// 			uni.hideLoading();
							// 			uni.showToast({
							// 				title: err,
							// 				icon: 'none',
							// 			});
							// 		})
							// 	},
							// })
						}
					}
				})
			},
			register() {
				console.log("register");
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4382910_1bcgyhz3rqw.ttf?t=1703216704048') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.niceui-flex-column {
		flex-direction: column;
	}

	.niceui-flex-row {
		flex-direction: row !important;
	}

	.niceui-center {
		align-items: center;
	}

	.niceui-between {
		justify-content: space-between;
	}

	.width-100p {
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	$head-color: #cd3b33;
	$white-color: #fff;
	$radius: 20rpx;
	$border-color: #efefef;
	$color-1: #007aff;
	$color-2: #4cd964;
	$color-3: #f0ad4e;
	$color-4: #dd524d;
	$list-item-height: 100rpx;
	$list-margin: 20rpx;
	$leftColor: #fdd447;
	$rightColor: #fa886a;

	.bg {
		background-image: linear-gradient(to bottom, $leftColor, $rightColor);
		height: 100vh;
	}

	.login-bg-img {
		width: 100%;
		margin-top: 100rpx;
	}

	.logo {
		position: absolute;
		z-index: 9;
		width: 100%;
		height: 100%;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.logo-border {
		align-items: center;
	}

	.logo-img {
		width: 200rpx;
		border-radius: 30rpx;
	}

	.logo-name {
		margin: 30rpx 0 30rpx;
		font-size: 38rpx;
		color: #fff;
		font-weight: bold;
	}

	.logo-slogan {
		font-size: 34rpx;
		color: #fff;
		letter-spacing: 9rpx;
	}

	.login-btns {
		position: absolute;
		z-index: 9;
		bottom: 120rpx;
		height: 100rpx;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.btn-view {
		width: 310rpx;
		margin: 0rpx auto;
		border-radius: 40rpx;
		height: 80rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.login {
		background-color: #fff;
	}

	.register {
		background-color: #ffe8e3;
	}

	.btn-text {
		color: $leftColor;
		font-size: 32rpx;
	}
</style>